<!--
	首页
	张中博
	2017.5.6
	
	
-->


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" data-href="list.html">
            <span class="mui-icon mui-icon-spinner-cycle mui-spin"></span>
            <span class="mui-tab-label">QQ音乐</span>
        </a>
        <a class="mui-tab-item" data-href="newList.html">
            <span class="mui-icon mui-icon-minus"></span>
            <span class="mui-tab-label">新闻列表</span>
        </a>
        <a class="mui-tab-item" data-href="person.html">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">个人中心</span>
        </a>
    </nav>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init();
    	mui.plusReady(function(){
    		//创建三个子页面，对应底部的点击事件
    		var subpages = ["list.html","newList.html","person.html"];
    		//获取当前的webview
    		var self = plus.webview.currentWebview();
    		for(var i = 0;i < subpages.length;i++){
    			//创建子页面
    			var sub = plus.webview.create(subpages[i],subpages[i],{   				
    				top: "0",
    				bottom: "50px"
    			})
    			if(i > 0){
    				//显示第一个子页面，其他的先隐藏
    				sub.hide();
    			}
    			self.append(sub);
    		}
    		
    		
    		//底部的点击事件
    		var activeSub = subpages[0]
    		mui(".mui-bar-tab").on("tap","a",function(){
    			//获取对应的点击的data-href
    			var targetSub = this.getAttribute("data-href");
    			if(targetSub == activeSub){
    				return;
    			}
    			plus.webview.show(targetSub);
    			activeSub = targetSub;
    			
    		})
    		
    		
    	})
    </script>
</body>
</html>
